<template>
	<div class="classification homeProductItem" style="margin-bottom: 0.4rem;">
		<div class="aui-row">
			<div v-if="cateList" class="aui-col-5" v-for="(item, index) in cateList" :key="index" @click='jumpEvent(item,index)'>
				<div style="position: relative;width: 100%;height: 0;overflow-y: hidden;padding-bottom: 100%;">
					<img style="width: 100%;" :src="item.publicityPicture||item.imageUrl||item.imgUrl||'static/image/demo1.png'"/>
				</div>
				<!--<img :style="{height:iconwidth+'px'}" :src="item.publicityPicture||item.imageUrl||item.imgUrl||'static/image/demo1.png'" @click='jumpEvent(item,index)' />-->
				<div class="aui-grid-label">{{item.relTitle||item.name||item.goodsClassName||item.className}}</div>
			</div>
			<!--<div class="aui-col-5" v-if="getseeall">
        <router-link to="classify">
          <div class="see_all">
            <img src="static/image/demo1.png">
            <i class="icon njfont nj-gengduo"></i>
            <div class="aui-grid-label">查看全部</div>
          </div>
        </router-link>
      </div>-->
		</div>
	</div>
</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		props: {
			page: {
				type: String,
				default: 'other'
			},
			cateList: {
				type: Array,
				default: () => []
			},
			firCode: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				pageTree: [],
				iconwidth: null,
			}
		},
		computed: {
			...mapGetters('xxy', [
				"getseeall"
			]),
		},
		methods: {
			getimg() {
				var result = window.matchMedia('(max-width: 414px)');
				if(result.matches) {
					if(document.querySelectorAll(".aui-col-5")[0]) {
						var colwidth = window.getComputedStyle(document.querySelectorAll(".aui-col-5")[0], null).width
						this.iconwidth = colwidth.substring(0, colwidth.indexOf(".") + 3) - 12;
					}
				} else {
					this.iconwidth = null
				}

			},
			jumpEvent(item, index) {
				// 跳到分类页
				if(this.page === 'newPage' && item.extendField) {
					var urldata = JSON.parse(item.extendField).url.path
					this.$router.push({
						path: urldata
					})
				} else if(this.page === 'firstPage') {
					this.$router.push({
						path: 'goodsClassify?code=' + (item.classificationId || this.firCode || item.classCode)
					})
				} else {
					this.$router.push({
						path: 'goodsClassify?code=' + (item.classificationId || this.firCode) + "&pageIndex=" + (1 + parseInt(index))
					})
				}
			},
		},
		created() {

		},
		mounted() {
			this.$nextTick(function() {
				this.getimg()
			})
		},
	}
</script>

<style>
	.classification {
		border: none;
		margin-bottom: 0rem;
	}
	
	.homeProductItem .aui-col-5 {
		padding: 6px;
	}
	
	.homeProductItem .aui-col-5 img {
		height: auto;
		margin: 0 auto
	}
	
	.classification .aui-col-5 .aui-grid-label {
		font-size: 0.6rem;
	}
</style>